import React from 'react'
import Table from 'components/Tables/Base'
import style from './ProjectStatus.scss'

const ProjectStatus = () => {
  const [list, setList] = React.useState([])
  React.useEffect(() => {
    request
      .get(
        '/kapis/clusters/host/monitoring.kubesphere.io/v1alpha3/namespaces/project/workloads?type=rank&metrics_filter=workload_cpu_usage%7Cworkload_memory_usage_wo_cache%7Cworkload_net_bytes_transmitted%7Cworkload_net_bytes_received%7Creplica&page=1&limit=10&sort_type=desc&sort_metric=workload_cpu_usage'
      )
      .then(res => {
        const { results = {} } = res
        const data = []
        results.forEach(i => {
          const val = {}
          if (i?.data?.result?.[0]?.metric) {
            i?.data?.result?.forEach(values => {
              val[values?.metric?.workload] = values?.value?.[1]
            })
            data.push({ [i.metric_name]: val })
          }
        })

        const dataList = []
        const serverNameList = Object.keys(
          Object.values(
            data.find(item => item['workload_deployment_replica_available'])
          )[0]
        )
        serverNameList.forEach(i => {
          dataList.push({
            name: i.split(':')[1],
            type: i.split(':')[0],
          })
        })
        dataList.forEach(i => {
          data.forEach(item => {
            i[Object.keys(item)[0]] = Object.values(item)[0][
              `${i.type}:${i.name}`
            ]
          })
        })
        console.log(data, dataList, 'qqq')
        setList(dataList)
      })
  }, [])

  return (
    <div className={style.content}>
      <Table
        hideHeader
        hideFooter
        rowKey="name"
        data={list}
        loading={false}
        columns={[
          {
            title: '服务名称',
            dataIndex: 'name',
            render: v => {
              return (
                <>
                  <img
                    style={{
                      width: '30px',
                      height: '30px',
                      marginRight: '10px',
                    }}
                    src="/assets/new/row.png"
                  />
                  <span style={{ lineHeight: '30px', verticalAlign: 'top' }}>
                    {v}
                  </span>
                </>
              )
            },
          },
          // {
          //   title: '服务类型',
          //   dataIndex: 'type',
          // },
          {
            title: 'CPU使用量(M)',
            dataIndex: 'workload_cpu_usage',
            render: v => (v ? Math.floor(Number(v) * 1024) : 0),
          },
          {
            title: '内存使用量(M)',
            dataIndex: 'workload_memory_usage_wo_cache',
            render: v => (v ? Math.floor(Number(v) / 1024 / 1024) : 0),
          },
          // {
          //   title: '出站流量(Kb)',
          //   dataIndex: 'workload_net_bytes_transmitted',
          //   render: v => (v ? Math.floor(Number(v)) : 0),
          // },
          // {
          //   title: '入站流量(Kb)',
          //   dataIndex: 'workload_net_bytes_received',
          //   render: v => (v ? Math.floor(Number(v)) : 0),
          // },
        ]}
      />
    </div>
  )
}

export default ProjectStatus
